<template>
  <div class="form-view-row form-service-provider-view">
    <label>{{ field.displayName }}</label>
    <div class="form-view-row-content" v-if="field.subFormFieldList && field.subFormFieldList.length > 0 ">
      <!-- start 子表单表格 -->
      <el-table
        v-if="columns.length"
        :data="subformFieldsValues"
        header-row-class-name="common-list-table-header__v2"
        border
      >
        <el-table-column type="index" width="50" :label="$t('common.base.SN')" />
        <el-table-column
          v-for="(column, index) in columns"
          :key="`${column.field}_${index}`"
          :label="column.label"
          :prop="column.field"
          :width="column.width"
          :min-width="column.minWidth || '150px'"
          :show-overflow-tooltip="column.field !== 'name'"
          :align="column.align"
        >
          <template slot-scope="scope">
            <!-- 地址 -->
            <span v-if="column.formType === 'address'">
              {{ changeTableColumnVal(scope.row, column) }}
            </span>
            <span v-else>
              {{
                $formatFormField(column, scope.row)
              }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- end 子表单表格 -->
    </div>
  </div>
</template>

<script>

export default {
  name: 'form-relation-form-view',
  props: {
    field: {
      type: Object,
      default: () => ({}),
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    columns() {
      let tableColumns = []
      if(this.field?.subFormFieldList.length > 0){
        tableColumns = [...this.field?.subFormFieldList];
        tableColumns.map(field => {
          field.label = field.displayName;
          field.field = field.fieldName;
        });
      }
      return tableColumns;
    },
    subformFieldsValues() {
      return this.value;
    },
  },
  methods: {
    // 处理表格数据
    changeTableColumnVal(row, item){
      if(item.formType === 'address') return row[item.field]?.all || ''
    },
  },
};
</script>
<style lang="scss" scoped>
.form-service-provider-view {
  align-items: flex-start;
}
</style>

